<template>
  <div id="app">
    <div class="row panel">
      <div id="task-list" class="inner">
        <h3><i class="icon-train"></i>AGV任务执行情况</h3>
            <div class="header">
              <span>AGV id</span><span>物料来源</span><span>前往目标</span><span>当前动作</span>
            </div>
            <div class="content">
              <ul>
                <li v-for="item in agvTaskList" :key="item.id">
                  <span>{{ item.agv }}</span>
                  <span>{{ item.from }}</span>
                  <span>{{ item.target }}</span>
                  <span>{{ item.status }}</span>
                </li>
              </ul>
            </div>
      </div>
    </div>
    <div class="row">
      <div id="map-view"></div>
      <div class="panel">
        <div id="charts" class="inner">
          <div id="agv-status"></div>
          <div id="agv-yield"></div>
          <div id="agv-activation"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { RingChart, HistChart, LineChart } from './assets/js/charts'
import { AGV2DMap } from './assets/js/agv-path'
import { emqx } from './assets/js/emqx'

export default {
  data() {
    return {
      agvTaskList: [],
      taskNumber: 0,
      mapData: {
        mapName: 'B区泵体分厂',
        height: 38,
        width: 61, // 单位：m
        paths: [{
          stations: [0, 1],
          guides: [0, 1],
          type: 'curveLinear',
          direction: 0, // 0: forward, 1: backward, 2: bothway
          time: 6
        }, {
          stations: [1, 2],
          guides: [],
          type: 'curveLinear', // curveBasis
          direction: 0, // 0: forward, 1: backward, 2: bothway
          time: 6
        }, {
          stations: [1, 3],
          guides: [],
          type: 'curveLinear', // curveBasis
          direction: 0, // 0: forward, 1: backward, 2: bothway
          time: 6
        }, {
          stations: [3, 4],
          guides: [2],
          type: 'curveLinear', // curveBasis
          direction: 0, // 0: forward, 1: backward, 2: bothway
          time: 6
        }],
        stations: [{
            id: 0,
            name: '清洗机上线',
            status: 'green',
            info: '上料中',
            product: 103,
            point: { x: 2.9, y: 17 }
        }, {
            id: 1,
            point: { x: 33.4, y: 5.5 }
        }, {
            id: 2,
            name: '滚子J线下线',
            status: 'red',
            info: '故障',
            product: 75,
            point: { x: 33.4, y: 25.8 }
        }, {
            id: 3,
            point: { x: 42.3, y: 5.5 }
        }, {
            id: 4,
            name: '滚子A,C线下线',
            status: 'yellow',
            info: '空闲',
            product: 22,
            point: { x: 46.3, y: 29.5 }
        }],
        guides: [{ x: 3.9, y: 16.9 }, { x: 3.9, y: 5.5 }, { x: 42.3, y: 29.5 }],
        agvs: [{
          id: 'B1-001',
          from: 0,
          target: 0,
          status: '',
          color: 'yellow'
        }, {
          id: 'B1-002',
          from: 0,
          target: 0,
          status: '',
          color: 'green'
        }],
        equipments: [{
          id: 0,
          name: '清洗机',
          shape: 'rect',
          point: { x: 0, y: 27.2 },
          width: 2.6,
          height: 1.1,
          color: '#6f4f6f'
        }, {
          id: 1,
          name: '提升机',
          shape: 'rect',
          point: { x: 7.2, y: 11.5 },
          width: 2.2,
          height: 2.3,
          color: '#7f7f3f'
        }, {
          id: 2,
          name: '下法兰B线',
          shape: 'rect',
          point: { x: 11.4, y: 24 },
          width: 3.5,
          height: 18,
          color: '#7ffa20'
        }, {
          id: 3,
          name: '下法兰C线',
          shape: 'rect',
          point: { x: 15.1, y: 24 },
          width: 3.5,
          height: 18,
          color: '#7ffa20'
        }, {
          id: 4,
          name: '下法兰H线',
          shape: 'rect',
          point: { x: 20.7, y: 24.7 },
          width: 3.5,
          height: 18,
          color: '#7ffa20'
        }, {
          id: 5,
          name: '下法兰A线',
          shape: 'rect',
          point: { x: 24.5, y: 24.7 },
          width: 3.5,
          height: 18,
          color: '#7ffa20'
        }, {
          id: 6,
          name: '滚子J线',
          shape: 'rect',
          point: { x: 30, y: 22.7 },
          width: 2.9,
          height: 12.8,
          color: '#7ffa20'
        }, {
          id: 7,
          name: '滚子K线',
          shape: 'rect',
          point: { x: 34, y: 22.7 },
          width: 3.5,
          height: 16.3,
          color: '#7ffa20'
        }, {
          id: 8,
          name: '滚子B线',
          shape: 'rect',
          point: { x: 38.1, y: 23 },
          width: 3.5,
          height: 16.1,
          color: '#7ffa20'
        }, {
          id: 9,
          name: '滚子A线',
          shape: 'rect',
          point: { x: 42.7, y: 22.9 },
          width: 3.5,
          height: 12.8,
          color: '#7ffa20'
        }, {
          id: 10,
          name: '滚子C线',
          shape: 'rect',
          point: { x: 47.8, y: 22 },
          width: 3.5,
          height: 11.9,
          color: '#7ffa20'
        }, {
          id: 10,
          name: '滚子I线',
          shape: 'rect',
          point: { x: 52.9, y: 20.5 },
          width: 3.5,
          height: 10.4,
          color: '#7ffa20'
        }]
      }
    }
  },
  mounted() {
    // 创建AGV状态饼图
    this.AGVStatusChart = new RingChart('agv-status');
    // 订阅mqtt话题，绑定回调事件
    emqx.SubscribeTopic('agv-status', msg => {
      this.AGVStatusChart.setData('运行中', msg.running);
      this.AGVStatusChart.setData('空闲中', msg.idle);
      this.AGVStatusChart.setData('充电中', msg.charging);
      this.AGVStatusChart.setData('故障异常', msg.error);
    });
    this.AGVYieldChart = new HistChart('agv-yield');
    // 可以在任何时候修改表格的横坐标标签对应数据
    this.AGVYieldChart.setData('滚子', 160);
    this.AGVActChart = new LineChart('agv-activation');
    this.AGVActChart.setDataList([15, 30, 82, 64]);

    //监听窗口大小变化，使3个图表自适应浏览器窗口大小
    window.addEventListener('resize', () => {
      this.AGVStatusChart.chart.resize();
      this.AGVYieldChart.chart.resize();
      this.AGVActChart.chart.resize();
    });

    // 加载现场物流地图，通过mapData初始化整个场景
    this.agvMap = new AGV2DMap('#map-view', this.mapData);
    // 每个物流地图对象中的AGV对象都自动绑定了moving函数
    // 通过调用agv.moving即可实现agv的运动动画，moving参数为首端站点id，末端站点id，和时否运动标志isMove
    // agv.moving(startID, endID, isMove)
    // isMove可以不用设置，此时AGV默认设置完毕立刻开始运动，设置为false时AGV暂停，只有重新设置true才会继续运动
    this.agvMap.agvs.forEach(agv => {
      emqx.SubscribeTopic(agv.id, msg => {
        agv.moving(msg.start, msg.end, msg.move);

        let agvInfo = {};
        agvInfo.id = this.taskNumber++;
        agvInfo.agv = agv.id;
        agvInfo.from = this.mapData.stations.find(s => s.id === msg.from).name;
        agvInfo.target = this.mapData.stations.find(s => s.id === msg.target).name;
        if(agvInfo.from !== agv.from || agvInfo.target !== agv.target) {
          agv.from = agvInfo.from;
          agv.target = agvInfo.target;
        } else {
          return;
        }
        agvInfo.status = msg.status;
        this.agvTaskList.push(agvInfo);
      })
    });
  },
  methods: {
  }
}
</script>

<style lang="less">
@import './assets/css/animation.css';
html, body, #app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.panel {
  border: 20px solid white;
  border-width: 50px 40px 22px 128px;
  box-sizing: border-box;
  position: relative;

  border-image-source: url("./assets/imgs/border.png");
  border-image-slice: 50 40 22 130;
  border-image-width: 50px 40px 22px 128px;
  border-image-repeat: stretch;
}
.inner {
  position: absolute;
  top: -50px;
  right: -40px;
  bottom: -22px;
  left: -125px;
  padding: 20px;
    h3 {
      margin-top: -5px;
      margin-left: 5px;
      margin-bottom: 10px;
      width: 260px;
      font-size: 16px;
      color: white;
    }
    i {
      margin-right: 12px;
    }
}
#app {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  background: url("./assets/imgs/lamda_logo.png") no-repeat;
  background-size: contain;
  background-color: #000223;
}
.row:nth-child(1) {
  flex: 1.5;
  margin: 20px;
  margin-top: 60px;
}
.row:nth-child(2) {
  flex: 8.5;
  margin: 60px 20px 20px 0;
  display: flex;
  flex-direction: column;
  #map-view {
    flex: 7;
  }
  .panel {
    flex: 3;
    pointer-events: auto;
  }
}
#charts {
  display: flex;
  #agv-status {
    flex: 1;
  }
  #agv-yield {
    flex: 1;
  }
  #agv-activation {
    flex: 1;
  }
}
#task-list {
  .header {
    background-color: rgba(255, 255, 255, 0.1);
    height: 30px;
    line-height: 30px;
    margin: 6px -22px 0 -22px;
    span {
      display: inline-block;
      width: 25%;
      text-align: center;
      font-size: 10px;
      color: #68d8fe;
    }
  }
  .content {
    height: 80%;
    /* 超出内容进行隐藏 */
    overflow: hidden;
    margin-left: -62px;
    ul {
      position: absolute;
      width: 100%;
      list-style-type: none;
      margin-top: 5px;
      li {
        height: 30px;
        line-height: 30px;
        color: #5697e6;
        span {
          float: left;
          width: 25%;
          text-align: center;
          font-size: 8px;
        }
      }
    }
  }
}
</style>
